<template>
  <div>
    <h2 style="text-align: center; border: 1px solid #b3c0d1; overflow: hidden;">
      森林病虫害防治系统
    </h2>
    <el-container style="height: auto; width:auto border: 1px solid #eee">
      <el-aside width="230px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1" style="width: 230px">
            <template slot="title"
              ><i class="el-icon-message"></i>森林病虫害防治系统</template
            >

            <el-submenu index="1-1" v-if="PersonBase">
              <template slot="title">资料管理</template>
              <el-menu-item index="1-1-1" @click="sta()">虫害一览</el-menu-item>
              <el-menu-item index="1-1-2" @click="dis()">病害一览</el-menu-item>
              <el-menu-item index="1-1-2" @click="mous()"
                >鼠害一览</el-menu-item
              >
            </el-submenu>

            <el-submenu index="1-2" v-if="Prevention">
              <template slot="title">灾情防治</template>
              <el-menu-item index="1-2-1" @click="reg()">区域一览</el-menu-item>
              <el-menu-item index="1-2-2" @click="cls()">小班管理</el-menu-item>
              <el-menu-item index="1-2-2" @click="eve()">事件记录</el-menu-item>
            </el-submenu>

            <el-submenu index="1-3" v-if="Expert">
              <template slot="title">专家会商</template>
              <el-menu-item index="1-3-1" @click="exp()">专家一览</el-menu-item>
              <el-menu-item index="1-3-2" @click="con()">会商灾情</el-menu-item>
            </el-submenu>

            <el-submenu index="1-4" v-if="Inventory">
              <template slot="title">药剂器械出库信息管理</template>
              <el-menu-item index="1-4-1" @click="agn()"
                >药剂器械管理</el-menu-item
              >
              <el-menu-item index="1-4-2" @click="mov()">出库管理</el-menu-item>
            </el-submenu>

            <el-submenu index="1-5" v-if="SystemInfo">
              <template slot="title">系统信息</template>
              <el-menu-item index="1-5-1" @click="user()"
                >用户管理</el-menu-item
              >
              <el-menu-item index="1-5-2" @click="rec()">日志一览</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          
          <span style="margin-right:20px">你好用户：{{this.loginUser.userName}}</span>
          <a style="margin-right:100px" @click="excit()">退出登录</a>
        </el-header>

        <el-main>
          <div v-if="statues" class="img">
            <div class="img01">
              <div><img src="../img/2.jpg" alt="" /></div>
              <div><img src="../img/3.jpg" alt="" /></div>
            </div>
            <div class="img02">
              <div>
                <img src="../img/4.jpg" alt="" />
              </div>
              <div>
                <img src="../img/5.jpg" alt="" />
              </div>
            </div>
          </div>

          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      statues: true,
      root: "",
      PersonBase: false,
      Prevention: false,
      Expert: false,
      Inventory: false,
      SystemInfo: false,
    };
  },
  computed: {
    ...mapState("login", ["loginUser"]),
  },
  mounted() {
    console.log("打印" + this.loginUser.userRoot);
    this.root = this.loginUser.userRoot;
    console.log("--------" + this.root);
  },

  methods: {
    sta() {
      this.statues = false;
      this.$router.push("/main/Worm");
    },
    dis() {
      this.statues = false;
      this.$router.push("/main/disease");
    },
    mous() {
      this.statues = false;
      this.$router.push("/main/mouse");
    },
    user() {
      this.statues = false;
      this.$router.push("/main/user");
    },
    rec() {
      this.statues = false;
      this.$router.push("/main/red");
    },
    reg() {
      this.statues = false;
      this.$router.push("/main/reg");
    },
    cls() {
      this.statues = false;
      this.$router.push("/main/cls");
    },
    eve() {
      this.statues = false;
      this.$router.push("/main/eve");
    },
    exp() {
      this.statues = false;
      this.$router.push("/main/exp");
    },
    con() {
      this.statues = false;
      this.$router.push("/main/con");
    },
    agn() {
      this.statues = false;
      this.$router.push("/main/agn");
    },
    mov() {
      this.statues = false;
      this.$router.push("/main/mov");
    },

    getRoot() {
      console.log("======" + this.loginUser.userRoot);

      if (this.loginUser.userRoot == "超级管理员") {
        this.PersonBase = true;
        this.Prevention = true;
        this.Expert = true;
        this.Inventory = true;
        this.SystemInfo = true;
      } else if (this.loginUser.userRoot == "资料管理员") {
        this.PersonBase = true;
      } else if (this.loginUser.userRoot == "灾情管理员") {
        this.Prevention = true;
      } else if (this.loginUser.userRoot == "专家管理员") {
        this.Expert = true;
      } else if (this.loginUser.userRoot == "库房管理员") {
        this.Inventory = true;
      }
    },
    excit(){
      this.$router.push("/login");
    }
  },
  created() {
    this.getRoot();
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
 
}

.el-aside {
  color: #333;
}

.img {
  margin: 10px auto;
}

.img01 {
  display: flex;
  margin-left: 300px;
}
.img01 > div:first-child > img {
  width: 350px;
  height: 350px;
  margin: 10px;
}

.img01 > div:nth-child(2) > img {
  width: 350px;
  height: 350px;
  margin: 10px;
}
.img02 {
  display: flex;
  margin-left: 300px;
}

.img02 > div:first-child > img {
  width: 350px;
  height: 350px;
  margin: 10px;
}

.img02 > div:nth-child(2) > img {
  width: 350px;
  height: 350px;
  margin: 10px;
}
</style>